<template>
  <view class="content">
    <img src="../../../static/userBg.png" alt="" class="bgImg" />
    <view class="my-content">
      <view class="statistics">
        <div class="title">
          <div class="avatar">
            <img class="avatar-img" src="../../../static/avatar.png" alt="" />
          </div>
          <div class="username">评论家</div>
        </div>
        <div class="list">
          <div class="other" v-for="(item, index) in titleList" :key="index">
            <span class="jointly">{{ item.title }}</span
            ><span class="size">{{ item.size }}</span>
          </div>
        </div>
      </view>
      <view class="issue">
        <div class="jointly-title">我的发布</div>
        <div class="jointly-list">
          <div class="list-box" v-for="(item, index) in textData" :key="index">
            <p>{{ item.name }}</p>
            <up-icon name="arrow-right"></up-icon>
          </div>
        </div>
      </view>
      <view class="collect">
        <div class="jointly-title">我的收藏</div>
        <div class="jointly-list">
          <div class="list-box" v-for="(item, index) in textData" :key="index">
            <p>{{ item.name }}</p>
            <up-icon name="arrow-right"></up-icon>
          </div>
        </div>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from "vue";
import textData from "../tabbar-1/textData";
const titleList = reactive([
  {
    title: "发布",
    size: "12",
  },
  {
    title: "收藏",
    size: "12",
  },
  {
    title: "评论",
    size: "12",
  },
]);
</script>

<style lang="scss">
.content {
  width: 100%;
  height: 100%;
  background-color: #f1f5f8;
  position: relative;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
  .bgImg {
    width: 750rpx;
    height: 355rpx;
    border-radius: 0rpx 0rpx 18rpx 18rpx;
    position: absolute;
    top: 0;
    left: 0;
  }
  .my-content {
    width: 100vw;
    height: calc(100vh - 210rpx);
    position: relative;
    z-index: 1;
    padding-top: 210rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .statistics {
      width: 680rpx;
      height: 235rpx;
      background: linear-gradient(180deg, #fff 80%, #ffffff00);
      border-radius: 18rpx;
      margin-bottom: 24rpx;
      overflow: hidden;
      .title {
        width: 100%;
        height: 120rpx;
        display: flex;
        align-items: center;
        margin-bottom: 52rpx;
        overflow: hidden;
        position: relative;
        .avatar {
          width: 200rpx;
          height: 200rpx;
          background: #000;
          position: absolute;
          border-radius: 50%;
          left: -7%;
          top: -68%;
          overflow: hidden;
          .avatar-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        .username {
          font-size: 44rpx;
          margin-left: 181rpx;
        }
      }
      .list {
        width: 100%;
        display: flex;
        justify-content: space-around;
        .other {
          .jointly {
            margin-right: 6rpx;
            font-size: 28rpx;
          }
          .size {
            font-weight: bold;
            font-size: 30rpx;
          }
        }
      }
    }
    .issue,
    .collect {
      width: 680rpx;
      height: 291rpx;
      background: #fdfeff;
      border-radius: 18rpx;
      margin-bottom: 24rpx;
      padding: 24rpx;
      box-sizing: border-box;
      overflow: hidden;
      flex-shrink: 0;
      .jointly-title {
        font-weight: bold;
        font-size: 30rpx;
        position: relative;
        padding-left: 14rpx;
        margin-bottom: 20rpx;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translate(0, -50%);
          width: 4rpx;
          height: 24rpx;
          background: #b00a0a;
          border-radius: 2rpx;
        }
      }
      .jointly-list {
        width: 100%;
        height: calc(100% - 60rpx);
        overflow-x: hidden;
        overflow-y: scroll;
        .list-box {
          margin-bottom: 15rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
